<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<!--
  Material design buttons that mimic GAIA's buttons.

  Example:
    <gaia-button link></gaia-button>

  Attributes:
    'link' - there are two kinds of button: regular blue button and a button
             that looks more like a link.
    'disabled' - button is disabled when the attribute is set.
-->
<dom-module id="gaia-button">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      :host([link]) cr-button {
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        color: var(--google-blue-600);
        font-weight: 400;
        margin: 0 -0.57em;
        min-width: 0;
      }

      :host([link]) cr-button:focus {
        background-color: rgba(66, 133, 244, 0.12);
      }

      :host-context(.focus-outline-visible):host([link]) cr-button:focus {
        font-weight: 500;
      }

      :host([link]) cr-button[disabled] {
        color: rgb(168, 168, 168);
      }
    </style>
    <cr-button id="button" disabled="[[disabled]]" on-click="onClick_"
        noink$="[[link]]">
      <slot></slot>
    </cr-button>
  </template>
  <script src="gaia_button.js"></script>
</dom-module>
